<!DOCTYPE html>
<html>
<head>
    <script src="js/global_data.js"></script>
    <!-- 代码编辑器导入文件-->
    <link rel="stylesheet" href="codemirror/lib/codemirror.css"/>
    <script src="codemirror/lib/codemirror.js"></script>
    <!-- 代码编辑器主题 -->
    <link href="codemirror/theme/3024-day.css" rel="stylesheet">
    <link href="codemirror/theme/3024-night.css" rel="stylesheet">
    <link href="codemirror/theme/abcdef.css" rel="stylesheet">
    <link href="codemirror/theme/ambiance-mobile.css" rel="stylesheet">
    <link href="codemirror/theme/ambiance.css" rel="stylesheet">
    <link href="codemirror/theme/base16-dark.css" rel="stylesheet">
    <link href="codemirror/theme/base16-light.css" rel="stylesheet">
    <link href="codemirror/theme/bespin.css" rel="stylesheet">
    <link href="codemirror/theme/blackboard.css" rel="stylesheet">
    <link href="codemirror/theme/cobalt.css" rel="stylesheet">
    <link href="codemirror/theme/colorforth.css" rel="stylesheet">
    <link href="codemirror/theme/darcula.css" rel="stylesheet">
    <link href="codemirror/theme/duotone-dark.css" rel="stylesheet">
    <link href="codemirror/theme/duotone-light.css" rel="stylesheet">
    <link href="codemirror/theme/eclipse.css" rel="stylesheet">
    <link href="codemirror/theme/elegant.css" rel="stylesheet">
    <!-- mode -->
    <script type="text/javascript" src="codemirror/mode/clike/clike.js"></script>
    <!-- 编辑 -->
    <script type="text/javascript" src="codemirror/addon/edit/closebrackets.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/closetag.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/continuelist.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/matchbrackets.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/matchtags.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/trailingspace.js"></script>
    <!-- hint -->
    <script type="text/javascript" src="codemirror/addon/hint/javascript-hint.js"></script>
    <script type="text/javascript" src="codemirror/addon/hint/show-hint.js"></script>
    <link href="codemirror/addon/hint/show-hint.css" rel="stylesheet">
    <!--支持代码折叠-->
    <link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css"/>
    <script src="codemirror/addon/fold/foldcode.js"></script>
    <script src="codemirror/addon/fold/foldgutter.js"></script>
    <script src="codemirror/addon/fold/brace-fold.js"></script>
    <script src="codemirror/addon/fold/comment-fold.js"></script>
    <!-- vue和axios-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>


    <title>代码对弈</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="backstage/lib/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="backstage/css/style.css">
    <link rel="stylesheet" type="text/css" href="backstage/css/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="css/sweet-alert.css">
    <style>
        textarea{
            float: left;
            outline-color: invert ;
            outline-style: none ;
            outline-width: 0px ;
            border: none ;
            border-style: none ;
            text-shadow: none ;
            -webkit-appearance: none ;
            -webkit-user-select: text ;
            outline-color: transparent ;
            box-shadow: none;
            height: 100%;
            background-color: rgba(50,50,50,1.00);
            resize:none;
            font-size: 17px;
            font-family:Consolas;
        }
    </style>
</head>
<canvas id="cas" style="position: absolute;z-index : 0 "></canvas>
<body class="flat-blue" style="overflow-x: hidden">
<div class="app-container">
    <div class="row content-container">
        <nav class="navbar navbar-default navbar-fixed-top navbar-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-expand-toggle">
                        <i class="fa fa-bars icon"></i>
                    </button>
                    <ol class="breadcrumb navbar-breadcrumb">
                        <li class="active">代码对弈</li>
                    </ol>
                    <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                        <i class="fa fa-th icon"></i>
                    </button>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                        <i class="fa fa-times icon"></i>
                    </button>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-bell-o"></i></a>
                        <ul class="dropdown-menu animated fadeInDown">
                            <li class="title">
                                系统通知 <span class="badge pull-right">0</span>
                            </li>
                            <li class="message">
                                没有新消息
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown danger">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-users"></i> 4</a>
                        <ul class="dropdown-menu danger  animated fadeInDown">
                            <li class="title">
                                好友列表 <span class="badge pull-right">3</span>
                            </li>
                            <li>
                                <ul class="list-group notifications">
                                    <a href="#">
                                        <li class="list-group-item">
                                            <span class="badge">1</span> <i class="fa fa-mars icon"></i> 吴永康
                                        </li>
                                    </a>
                                    <a href="#">
                                        <li class="list-group-item">
                                            <span class="badge success">1</span> <i class="fa fa-venus icon"></i> 李文俊
                                        </li>
                                    </a>
                                    <a href="#">
                                        <li class="list-group-item">
                                            <span class="badge danger">2</span> <i class="fa fa-comments icon"></i> customers messages
                                        </li>
                                    </a>
                                    <a href="#">
                                        <li class="list-group-item message">
                                            view all
                                        </li>
                                    </a>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown profile">
                        <a href="#" id="LoginOutTitleName" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="caret"></span></a>
                        <ul class="dropdown-menu animated fadeInDown">
                            <li class="profile-img">
                                <img src="backstage/img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
                            </li>
                            <li>
                                <div class="profile-info">
                                    <h4 class="username" id="LoginOutName"></h4>
                                    <p id="LoginOutEmail"></p>
                                    <div class="btn-group margin-bottom-2x" role="group">
                                        <button onclick="loginOut()" type="button" class="btn btn-default"><i class="fa fa-sign-out"></i> 登出</button>
                                        <script>
                                            function loginOut() {
                                                localStorage.removeItem("userToken");
                                                window.location="login.html";
                                            }
                                        </script>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="side-menu sidebar-inverse">
            <nav class="navbar navbar-default" role="navigation">
                <div class="side-menu-container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <div class="icon fa fa-cloud"></div>
                            <div class="title">问题反馈</div>
                        </a>
                        <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="userMessage.html">
                                <span class="icon fa fa-user"></span><span class="title">个人信息</span>
                            </a>
                        </li>

                        <li class="active">
                            <a href="CodeAndCode.html">
                                <span class="icon fa fa-file-code-o"></span><span class="title">代码对弈</span>
                            </a>
                        </li>

                        <li>
                            <a href="RobotLode.html">
                                <span class="icon fa fa-android"></span><span class="title">人机对弈</span>
                            </a>
                        </li>

                        <!--  提交列表-->
                        <li>
                            <a href="SubmitList.html">
                                <span class="icon fa fa-list"></span><span class="title">提交列表</span>
                            </a>
                        </li>

                        <li>
                            <a href="UserMatch.html">
                                <span class="icon glyphicon glyphicon-stats"></span><span class="title">赛事</span>
                            </a>
                        </li>

                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </nav>
        </div>



        <!-- Main Content -->
        <div class="container-fluid">
            <div id="mainArea" class="side-body padding-top">
                <div class="row  no-margin-bottom" id="mybody">
                    <div class="col-lg-5 " id="body1" style="height: 100%;background-color: rgba(255,255,255,0.7)">
                        <div class="well" style="opacity: 0.9; height: 16%;">
                            <p>时间限制：2 秒</p>
                            <p>空间限制：128 MB</p>
                            <p>服务器能识别编译错误，运行错误，内存超限，“长考”超时，以及落子犯规、等错误，自动判定获胜玩家.</p>
                            <p>运算结果及复盘将在用户"提交列表"进行显示</p>
                        </div>
                        <h2 style="height: 4%;">函数接口定义</h2>
                        <div class="well" style="height: 20%;">
                            <h4>Java</h4>
                            <div id="interface" style="border:solid 1px rgb(221,221,221);width: 60%;border-radius: 7px">
                                public static int findMost(int myCheer,int[][] input) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 908;<br>}
                            </div>
                            <p style="color: skyblue">
                                return 908代表落子第十行第九列(棋盘从0行0列开始)<br>
                                input数组是15X15的棋盘，棋盘中-1代表白子，1表示黑子，0表示此处并未落子，myCheer是所持棋子（1黑/0白）
                            </p>
                        </div>
                        <h2 style="height: 5%;">以下为目前可挑战选手</h2>

                        <table id="UserTable" class="table table-hover">
                            <!--动态加载内容 -->
                        </table>
                        <div id="pageRoll" style="height: 5%;">
                            <div class='col-sm-3'></div>
                            <ul class='pagination' style='width: 300px;font-size: 20px;'>
                                <li>
                                    <a href="javascript:changePages(0)" aria-label='Previous'>
                                        <span aria-hidden='true'>&laquo;</span>
                                    </a>
                                </li>
                                <li id='pageOne' class="active">
                                    <a href='javascript:LodeUserTable("1#One")'>1</a>
                                </li>
                                <li id='pageTwo'>
                                    <a href='javascript:LodeUserTable("2#Two")'>2</a>
                                </li>
                                <li id='pageThree'>
                                    <a href='javascript:LodeUserTable("3#Three")'>3</a>
                                </li>
                                <li id='pageFour'>
                                    <a href='javascript:LodeUserTable("4#Four")'>4</a>
                                </li>
                                <li id='pageFive'>
                                    <a href='javascript:LodeUserTable("5#Five")'>5</a>
                                </li>
                                <li>
                                    <a href='javascript:changePages(1)' aria-label='Next'>
                                        <span aria-hidden='true'>&raquo;</span>
                                    </a>
                                </li>
                            </ul>


                        </div>
                    </div>
                    <div class="col-lg-7" id="body2" style="height: 100%;opacity: 1">
                        <div style="height: 6%;background-color: rgb(34,34,34);display: flex">
                            <select class="form-control" id="languageSelect" style="background-color: rgba(135,206,235,1.00);width: 20%;color: white;border-color: rgba(135,206,235,1.00);position: relative;top: 15%;height: 70%;font-size: 17px;border-radius: 7px">
                                <option >c++(g++4.9.2)</option>
                                <option>c(gcc4.9.2)</option>
                                <option selected="selected">java(jdk-1.8.0_202)</option>
                            </select>
                            <p style="position: relative;left: 17%;font-size: 22px;top: 20%;font-family: Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, Monaco, Courier New, monospace;color: rgba(191,239,255,1.00)">OnLine Judge System</p>
                            <p style="left:250px;color: white;position: relative;font-size: 22px;top: 20%;font-family: Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, Monaco, Courier New, monospace;color: rgba(202,225,255,1.00)">主题选择：</p>
                            <select name="codemirrorTheme" onchange="ChangeTheme()" class="form-control" id="codemirrorTheme" style="left:250px;background-color: rgba(205,140,149,1.00);width: 20%;color: white;border-color: rgba(205,140,149,1.00);position: relative;top: 15%;height: 70%;font-size: 17px;border-radius: 7px;">
                                <option>base16-dark</option>
                                <option>eclipse</option>
                                <option>3024-day</option>
                                <option>3024-night</option>
                                <option>abcdef</option>
                                <option>ambiance-mobile</option>
                                <option selected="selected">ambiance</option>
                            </select>
                        </div>
                        <div style="height: 89%">
                            <textarea class="form-control" id="codemirror" name="codemirror"></textarea>
                        </div>
                        <div style="height: 5%;background-color: rgb(34,34,34);display: flex">
                            <button class="btn" style="border-radius: 7px;position: relative;left: 1%;height: 85%;background-color: rgba(115,203,222,1.00);color: white
							  	" onclick="CodeSubmit()">保存并提交</button>
                            <button onclick="CodeClear(0);" class="btn" style="border-radius: 7px;position: relative;left: 3%;height:85%;background-color:rgba(146,102,184,1.00);color: white">代码清空</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Javascript Libs -->
    <script src="js/sweet-alert.js"></script>
    <script type="text/javascript" src="backstage/lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/Chart.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/bootstrap-switch.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="backstage/lib/js/ace/ace.js"></script>
    <script type="text/javascript" src="backstage/lib/js/ace/mode-html.js"></script>
    <script type="text/javascript" src="backstage/lib/js/ace/theme-github.js"></script>
    <!-- Javascript -->
    <script type="text/javascript" src="backstage/js/app.js"></script>
    <script type="text/javascript" src="backstage/js/index.js"></script>
    <script type="text/javascript" src="js/CodeAndCode.js"></script>
    <style>
        .CodeMirror{
            font-size: 17px;
        }
    </style>
    <script>
        // 判断用户有没有登录信息，没有的话自动登录跳转到登录页面
        let userMessage="";
        $.ajax({
            async: false,
            type: "post",
            data:'{"userToken":"'+localStorage.getItem("userToken")+'"}',
            url: serverIpAddress+"User/LodeUserMessage",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success:function (data) {
                userMessage = data;
            },
            error:function () {
                window.location="login.html";
            }
        });
        $("#LoginOutTitleName").html(userMessage.name+"<span class=\"caret\"></span>");
        $("#LoginOutName").html(userMessage.name);
        $("#LoginOutEmail").html(userMessage.email);


        var editor = CodeMirror.fromTextArea(document.getElementById("codemirror"), {
            lineNumbers: true,
            autofocus: true,
            mode: 'text/x-c++src',
            theme: 'eclipse',
            matchBrackets: true,
            autoCloseBrackets: true,
            extraKeys: {"Ctrl": "autocomplete"},
            lineWrapping: false
        });
        editor.setSize("","100%");
        editor.setOption("theme","ambiance");

        function ChangeTheme()
        {
            var theme = $("select[name=codemirrorTheme]").val();
            editor.setOption("theme",theme);
        }

        //监听语言选中事件
        $('#languageSelect').change(function(){
            //获取选中项的值
            let language = $("#languageSelect").val();
            if(language=="java(jdk-1.8.0_202)") {
                $("#interface").prev().text("Java");
                $("#interface").html("public static int findMost(int myCheer,int[][] input) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 908;<br>}");
            }
            else if(language=="c(gcc4.9.2)") {
                $("#interface").prev().text("C语言（支持C11标准）");
                $("#interface").html("int findMost(int myCheer, int** input) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 908;<br>}");
            }
            else if(language=="c++(g++4.9.2)") {
                $("#interface").prev().text("C++（支持C11标准）");
                $("#interface").html("int findMost(int myCheer, int** input) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 908;<br>}");
            }
        });
    </script>
</div>
</body>
</html>

